<template>
  <el-table
    ref="tableRef"
    id="elTable"
    v-bind="$attrs"
    :data="tableData"
    :height="tableHeight"
    :stripe="stripe"
    :border="border"
    style="max-width: 1300px"
    :highlight-current-row="singleChoice"
    v-loading="loading"
  >
    <!-- 默认插槽， -->
    <slot></slot>
    <!-- 复选框 -->
    <el-table-column v-if="showCheckout" type="selection" width="40" />
    <!-- 序号 -->
    <el-table-column v-if="showNo" type="index" label="序号" width="108" :align="'center'">
      <!-- 根据分页判断序号 -->
      <template #default="scope">
        <!-- <span v-if="pagination" @click=" () => {console.log(scope)}">
           -->
        <span v-if="pagination">
          {{ scope.$index + (pageable.pageCurrent - 1) * pageable.pageSize + 1 }}</span
        >
        <span v-else>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <template v-for="item in colConfigs" :key="item.prop + item.label">
      <!-- 插槽列 -->
      <el-table-column
        v-if="item.type === 'slot'"
        :prop="item.prop"
        :label="item.label"
        :align="item.align ? item.align : 'left'"
        :min-width="item.width"
      >
        <template #default="scope">
          <slot :name="item.slot_name" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <!-- 默认列 -->
      <el-table-column
        v-else
        :prop="item.prop"
        :label="item.label"
        :fixed="item.fixed"
        :align="item.align ? item.align : 'left'"
        :min-width="item.width"
      ></el-table-column>
    </template>
    <!-- 插入表格最后一行之后的插槽 -->
    <template #append>
      <slot name="append"> </slot>
    </template>
    <!-- 表格无数据情况 -->
    <template #empty v-if="!loading">
      <div class="table-empty">
        <slot name="empty">
          <img src="@/assets/images/notData.png" alt="notData" />
          <div>暂无数据</div>
        </slot>
      </div>
    </template>
  </el-table>
</template>

<script setup>
const props = defineProps({
  // 表格数据
  tableData: {
    type: Array,
    default: () => {}
  },
  // 表格高度，设置表格高度后可实现固定表头
  tableHeight: {
    type: Number,
    default: 300
  },
  // 斑马纹
  stripe: {
    type: Boolean,
    default: true
  },
  // 边框
  border: {
    type: Boolean,
    default: true
  },
  // 单选
  singleChoice: {
    type: Boolean,
    default: false
  },
  // 表格列设置
  colConfigs: {
    type: Array,
    default: () => []
  },
  // 复选框
  showCheckout: {
    type: Boolean,
    default: false
  },
  // 序号
  showNo: {
    type: Boolean,
    default: false
  },
  // 是否有使用分页器,有使用分页器需将分页器的prop传入到pageable中，渲染相应的序号
  // 分页器
  pagination: {
    type: Boolean,
    default: false
  },
  // 分页器参数
  pageable: {
    type: Object,
    default: () => ({
      pageSize: 10,
      pageCurrent: 1
    })
  },
  // 是否加载中
  loading: {
    type: Boolean,
    default: false
  }
})
// 表格单选事件current-change返回两个值，newRow为当前选中行，oldRow为上一次选中行
const handleCurrentChange = (newRow, oldRow) => {
  console.log(newRow, oldRow)
}
</script>
